<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>		
	</head>
	<body>
		<div class="mod-container">
			<div class="mod-topbarThrough">
				<div class="mod-topbar clearfix">
					<ul class="topLeft">
						<li>
							<span>北京</span>
							[切换城市]
						</li>
						<li>同城首页</li>
					</ul>
					<ul class="topRight">
						<li><a>登录</a></li>
						<li><a>注册</a></li>
						<li><a>我的订单</a></li>
						<li><a>客服电话:4000-399-360</a></li>
						<li><a>客户服务</a></li>
						<li><span>投诉建议</span></li>
					</ul>
				</div>
			</div>
						
			<div class="bannerThrough">
				<div class="mod-menu clearfix">
					<ul>
						<li><a>二手良品</a>
							<img src="img/3.jpg" />
						</li>
						<li><a>手机回收</a></li>
						<li><a>手机维修</a></li>
						<li><a href="html/repair.html">电脑维修</a></li>
						<li><a>以旧换新</a></li>
						<li><a>手机试用</a></li>
					</ul>
				</div>
				<div class="banner clearfix">
					<div class="nav">
						<ul>
							<li>修手机/Pad<div class="arrow"></div></li>
							<li>修电脑<div class="arrow"></div></li>
							<li>买手机<div class="arrow"></div></li>
							<li>买二手机<div class="arrow"></div></li>
						</ul>
					</div>
					<div class="navSelect clearfix">
						<div class="hotProblem clearfix">
							<p>热门问题：</p>
							<ul>
								<li>系统重装</li>
								<li>系统重装</li>
								<li>系统重装</li>
								<li>系统重装</li>
								<li>系统重装</li>
								<li>系统重装</li>
							</ul>
						</div>
						<div class="elseProblem clearfix">
							<p>其他问题：</p>
							<ul>
								<li>开机加速</li>
								<li>开机加速</li>
								<li>开机加速</li>
								<li>开机加速</li>
								<li>开机加速</li>
								<li>开机加速</li>
								<li>开机加速</li>
								<li>开机加速</li>
								<li>开机加速</li>
							</ul>
						</div>						
					</div>
					<div class="slider">
						<div class="roll">
							<img src="img/banner1.jpg" />
							<img src="img/banner2.gif" />
							<img src="img/banner3.png" />
							<img src="img/banner4.jpg" />
							<img src="img/banner5.jpg" />
						</div>						
					</div>
					<div class="sliderButton">
						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</div>
				</div>
			</div>
						
			<div class="mod-content">				
				<div class="hot clearfix">
					<ul>
						<li>
							<h2>手机换屏</h2>
							<p>上门服务 180天质保</p>
							<!--<img src="img/hot1.jpg" />-->
						</li>
						<li>
							<h2>手机换屏</h2>
							<p>上门服务 180天质保</p>
							<!--<img src="img/hot1.jpg" />-->
						</li>
						<li>
							<h2>手机换屏</h2>
							<p>上门服务 180天质保</p>
							<!--<img src="img/hot1.jpg" />-->
						</li>
						<li>
							<h2>手机换屏</h2>
							<p>上门服务 180天质保</p>
							<!--<img src="img/hot1.jpg" />-->
						</li>						
					</ul>
				</div>
				<div class="recover clearfix">
					<div class="recoverTop">
						<h2>热门手机回收</h2>
						<img src="img/arrow1.jpg"/>
						<p>查看更多</p>						
					</div>										
					<ul>
						<li></li>
						<li><p>苹果iphone 6</p></li>
						<li><p>苹果iphone 6</p></li>
						<li><p>苹果iphone 6</p></li>
						<li><p>苹果iphone 6</p></li>
						<li><p>苹果iphone 6</p></li>
					</ul>					
				</div>
				
				<div class="secondHand clearfix">
					<div class="secondHandTop">
						<h2>二手良品精选</h2>
						<img src="img/arrow1.jpg"/>
						<p>查看更多</p>						
					</div>										
					<ul>
						<li></li>
						<li><p>苹果iphone 6</p></li>
						<li><p>苹果iphone 6</p></li>
						<li><p>苹果iphone 6</p></li>
						<li><p>苹果iphone 6</p></li>
						<li><p>苹果iphone 6</p></li>
					</ul>					
				</div>
				<p class="fix">到店维修</p>
								
			</div>
			
			<div class="repairThrough">
				<div class="repair clearfix">
					<div class="search clearfix">
						<div class="province"><p>北京</p></div>
						<div class="city"><p>选择区县</p></div>
						<input type="text" id="searching" placeholder="输入您的位置查找附近的商家" />
						<input type="button" id="submit" value="搜索" />
					</div>
					<div class="shopRankLeft">
						<div class="shopRankSelect clearfix">
							<ul>
								<li><p>默认排序</p></li>
								<li><p>按成交量</p></li>
								<li><p>按人气</p></li>
								<li>
									<input type="checkbox" name="checkbox" id="checkbox" value="" />先行赔付
									<div class="map">地图模式</div>
								</li>
							</ul>
						</div>
						<div class="shopRank">
							<ul>
								<li>
									<figure>
										<img src="img/shop1.jpg"/>
										<figcaption>
											<a>顺通电脑维修</a>
											<span>店铺等级：</span>
											<a>
												<img src="img/shopgrade1.jpg"/>
												<img src="img/shopgrade1.jpg"/>
											</a>
											<p>主营：电脑维修是打发打发第三方阿凡达刚发...</p>
											<p>地址：北京交通撒旦法撒旦法萨芬的撒</p>
										</figcaption>
									</figure>
									<div class="population">
										<dl>
											<dd>先行赔付</dd>
											<dd>同城帮认证</dd>
											<dd>人气：85764次浏览</dd>
										</dl>
									</div>
									<a href="html/shop.html"><div class="enterShop">进入店铺</div></a>
								</li>
								<li>
									<figure>
										<img src="img/shop1.jpg"/>
										<figcaption>
											<a>顺通电脑维修</a>
											<span>店铺等级：</span>
											<a>
												<img src="img/shopgrade1.jpg"/>
												<img src="img/shopgrade1.jpg"/>
											</a>
											<p>主营：电脑维修是打发打发第三方阿凡达刚发...</p>
											<p>地址：北京交通撒旦法撒旦法萨芬的撒</p>
										</figcaption>
									</figure>
									<div class="population">
										<dl>
											<dd>先行赔付</dd>
											<dd>同城帮认证</dd>
											<dd>人气：85764次浏览</dd>
										</dl>
									</div>
									<a href="html/shop.html"><div class="enterShop">进入店铺</div></a>
								</li>
								<li>
									<figure>
										<img src="img/shop1.jpg"/>
										<figcaption>
											<a>顺通电脑维修</a>
											<span>店铺等级：</span>
											<a>
												<img src="img/shopgrade1.jpg"/>
												<img src="img/shopgrade1.jpg"/>
											</a>
											<p>主营：电脑维修是打发打发第三方阿凡达刚发...</p>
											<p>地址：北京交通撒旦法撒旦法萨芬的撒</p>
										</figcaption>
									</figure>
									<div class="population">
										<dl>
											<dd>先行赔付</dd>
											<dd>同城帮认证</dd>
											<dd>人气：85764次浏览</dd>
										</dl>
									</div>
									<a href="html/shop.html"><div class="enterShop">进入店铺</div></a>
								</li>
								<li>
									<figure>
										<img src="img/shop1.jpg"/>
										<figcaption>
											<a>顺通电脑维修</a>
											<span>店铺等级：</span>
											<a>
												<img src="img/shopgrade1.jpg"/>
												<img src="img/shopgrade1.jpg"/>
											</a>
											<p>主营：电脑维修是打发打发第三方阿凡达刚发...</p>
											<p>地址：北京交通撒旦法撒旦法萨芬的撒</p>
										</figcaption>
									</figure>
									<div class="population">
										<dl>
											<dd>先行赔付</dd>
											<dd>同城帮认证</dd>
											<dd>人气：85764次浏览</dd>
										</dl>
									</div>
									<a href="html/shop.html"><div class="enterShop">进入店铺</div></a>
								</li>
								<li>
									<figure>
										<img src="img/shop1.jpg"/>
										<figcaption>
											<a>顺通电脑维修</a>
											<span>店铺等级：</span>
											<a>
												<img src="img/shopgrade1.jpg"/>
												<img src="img/shopgrade1.jpg"/>
											</a>
											<p>主营：电脑维修是打发打发第三方阿凡达刚发...</p>
											<p>地址：北京交通撒旦法撒旦法萨芬的撒</p>
										</figcaption>
									</figure>
									<div class="population">
										<dl>
											<dd>先行赔付</dd>
											<dd>同城帮认证</dd>
											<dd>人气：85764次浏览</dd>
										</dl>
									</div>
									<a href="html/shop.html"><div class="enterShop">进入店铺</div></a>
								</li>							
							</ul>												
						</div>
						<div class="pageTurn">
							<ul>
								<li>1</li>
								<li>2</li>
								<li>3</li>
								<li>4</li>
								<li>5</li>
								<li>6</li>
								<li>7</li>
								<li>8</li>
								<li>9</li>
								<li>10</li>
								<li>下一页</li>
							</ul>
						</div>
					</div>
					
					
					<div class="commentRank">
						<p>商家好评榜</p>
						<ul>
							<li>
								<figure>
									<img src="img/rank1.jpg"/>
									<img src="img/shop1.jpg"/>
									<figcaption>
										<a>顺通电脑维修</a>
										<p>12343条评论</p>
									</figcaption>									
								</figure>
							</li>
							<li>
								<figure>
									<img src="img/rank2.jpg"/>
									<img src="img/shop1.jpg"/>
									<figcaption>
										<a>顺通电脑维修</a>
										<p>12343条评论</p>
									</figcaption>									
								</figure>
							</li>
							<li>
								<figure>
									<img src="img/rank3.jpg"/>
									<img src="img/shop1.jpg"/>
									<figcaption>
										<a>顺通电脑维修</a>
										<p>12343条评论</p>
									</figcaption>									
								</figure>
							</li>
							<li>
								<figure>
									<img src="img/rank4.jpg"/>
									<img src="img/shop1.jpg"/>
									<figcaption>
										<a>顺通电脑维修</a>
										<p>12343条评论</p>
									</figcaption>									
								</figure>
							</li>
							<li>
								<figure>
									<img src="img/rank4.jpg"/>
									<img src="img/shop1.jpg"/>
									<figcaption>
										<a>顺通电脑维修</a>
										<p>12343条评论</p>
									</figcaption>									
								</figure>
							</li>
							<li>
								<figure>
									<img src="img/rank4.jpg"/>
									<img src="img/shop1.jpg"/>
									<figcaption>
										<a>顺通电脑维修</a>
										<p>12343条评论</p>
									</figcaption>									
								</figure>
							</li>
							<li>
								<figure>
									<img src="img/rank4.jpg"/>
									<img src="img/shop1.jpg"/>
									<figcaption>
										<a>顺通电脑维修</a>
										<p>12343条评论</p>
									</figcaption>									
								</figure>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="footerThrough">
				<div class="footer">
					<div class="behind clearfix">
						<ul>
							<li>
								<p>购物指南</p>
								<a>购物流程</a>
								<a>购物流程</a>
								<a>购物流程</a>
							</li>
							<li>
								<p>购物指南</p>
								<a>购物流程</a>
								<a>购物流程</a>
								
							</li>
							<li>
								<p>购物指南</p>
								<a>购物流程</a>
								
							</li>
							<li>
								<p>购物指南</p>
								<a>购物流程</a>
								
							</li>
							<li>
								<p>购物指南</p>
								<a>购物流程</a>
								
							</li>
						</ul>
					</div>
					<div class="address">
						<p>客服电弧124313241&nbsp;&nbsp;<span>阿斯蒂芬</span>&nbsp;&nbsp;<span>去玩儿若</span></p>						
						<p>sfeqfqfs fe!@ #s12345245 3425245 adfas df23$% 离开的</p>
						<p>萨科合法sadffa看的哈斯sadfadf卡积分换</p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/roll.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var li = document.getElementsByClassName('nav')[0].getElementsByTagName('li');
		var navSelect = document.getElementsByClassName('navSelect')[0];
		for(var i=0;i<li.length;i++){
			li[i].onmouseover =function(){
				navSelect.style.display = "block";
			}
			li[i].onmouseout =function(){
				navSelect.style.display = "none";
			}
		}
		navSelect.onmouseover =function(){
			this.style.display = "block";
		}
		navSelect.onmouseout =function(){
			this.style.display = "none";
		}
	</script>
</html>































